<template>
    <div class="upload-wrap">
        <div v-for="(img, index) in imageList" :key="index" class="img-wrap" @click="previewImage(index)">
            <div class="delete-icon" @click.stop="removeImage(index)"></div>
            <div class="img-content" :style="{'background-image':'url(' + img.content + ')'}"></div>
        </div>
        <Uploader :after-read="onRead" accept="image/gif, image/jpeg, image/png, image/jpg" multiple class="upload-icon-wrap">
            <i class="icon-shangchuanzhaopian1"></i>
        </Uploader>
    </div>
</template>
<script>
import Api from "../api";
import axios from "../js/axios";
import { Vue, Component, Prop } from "vue-property-decorator";
import { Uploader, Icon, Toast, ImagePreview } from "vant";
@Component({
  components: { Uploader, Icon, ImagePreview }
})
export default class UploadImage extends Vue {
  @Prop(Array)
  imglist;
  data() {
    return {
      imageList: []
    };
  }
  created() {
    this.imageList = this.imglist;
  }
  onRead(file) {
    let fileType = Object.prototype.toString.call(file);
    let promiseList = [];
    if (fileType === "[object Array]") {
      file.map(v => {
        promiseList.push(
          new Promise((resolve, reject) => {
            this.uploadImage(v)
              .then(res => {
                resolve({
                  url: res.data.url,
                  file: v
                });
              })
              .catch(() => {
                resolve(null);
              });
          })
        );
      });
    } else {
      promiseList.push(
        new Promise((resolve, reject) => {
          this.uploadImage(file)
            .then(res => {
              resolve({
                url: res.data.url,
                file: file
              });
            })
            .catch(() => {
              resolve(null);
            });
        })
      );
    }
    Toast.loading({
      duration: 0,
      message: "上传中.."
    });
    Promise.all(promiseList)
      .then(resultList => {
        let count = 0;
        resultList.map(v => {
          if (v) {
            this.imageList.push({
              url: v.url,
              content: v.file.content
            });
            count++;
          }
        });
        this.$emit("update:imglist", this.toUrlList());
        this.$emit("uploadImage", this.toUrlList());
        Toast.clear();
        if (count == 0) {
          Toast.fail("上传失败!");
        } else if (count < resultList.length) {
          Toast.fail("部分文件上传失败!");
        }
      })
      .catch(() => {
        Toast.clear();
      });
  }
  uploadImage(file) {
    let formData = new FormData();
    formData.append("img", file.file);
    return axios.post(Api.upload, formData, {
      headers: { "Content-Type": "multipart/form-data" }
    });
  }
  previewImage(index) {
    let list = [];
    this.imageList.map(v => {
      list.push(v.content);
    });
    ImagePreview({
      images: list,
      startPosition: index
    });
  }
  removeImage(index) {
    this.imageList.splice(index, 1);
    this.$emit("update:imglist", this.toUrlList());
    this.$emit("removeImage", this.toUrlList());
  }
  toUrlList() {
    let urlList = [];
    this.imageList.map(v => {
      urlList.push({
        url: v.url,
        content: v.content
      });
    });
    return urlList;
  }
}
</script>

<style lang="less">
.img-wrap {
  position: relative;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;
  .img-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    background: no-repeat center center;
    background-size: cover;
  }
  .delete-icon {
    position: absolute;
    top: -0.24rem;
    right: -0.24rem;
    width: 0.53333333rem;
    height: 0.53333333rem;
    background: url("../../static/sq-delete.png");
    background-size: 100% 100%;
  }
}
.upload-wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 0.53333333rem 0.4rem 0.23333333rem 0.4rem;
}
.icon-shangchuanzhaopian1 {
  font-size: 30px;
  color: #999999;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -18px;
  margin-top: -21px;
}
.upload-icon-wrap {
  position: relative;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.3rem;
  border: 1px dashed #dcdcdc;
}
</style>
